<template>
  <view class="group-history">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="参团历史"></van-nav-bar>
    <!-- #endif -->
    <QcscrollUni
      ref="mescrollRef"
      :getData="getData"
      :height="heightScroll"
      :top="topScroll"
      :bottom="bottomScroll">
      <view class="li" v-for="(item, index) in dataList" :key="index">
        <view class="li-left">
          <view class="id">团ID：{{ item.teamNumber }}</view>
          <view class="type">
            <view class="type-first">身份：{{ item.type === 0 ? '团长' : '团员' }}</view>
            <view>
              贡献：{{ item.qualifiedAmount }} {{ item.qualifiedType === 2 ? '度' : '元' }}
            </view>
          </view>
          <view class="time">加入时间：{{ item.createTime }}</view>
        </view>
        <view :class="['li-right', 'status' + item.status]">
          <view class="top">
            <view class="img"></view>
          </view>
          <view class="btm">{{ statusFormat(item.status) }}</view>
        </view>
      </view>
    </QcscrollUni>
  </view>
</template>

<script lang="ts" setup>
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import { setToastInstance, systemInfo } from '@/mixins/info';
import { pagingMember } from '@/service/apis/market';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const statusFormat = (status: number): string => {
  const statusMap: any = {
    0: '进行中',
    1: '成功',
    2: '失败',
    3: '已退团',
  };
  return statusMap[status] || '——';
};

const topScroll = `0rpx`;
const bottomScroll = '0rpx';
let heightScroll = ref(`${systemInfo.screenHeight - systemInfo.safeBottom}px`);

// #ifdef H5
heightScroll.value = `${systemInfo.screenHeight - systemInfo.safeBottom - systemInfo.navHeight}px`;
// #endif

const dataList = ref([] as any[]); // 列表

const mescrollRef = ref();
// 上拉加载的回调
const getData = (
  extraParams: { pageNum: number; pageSize: number } = { pageNum: 1, pageSize: 10 }
) => {
  return new Promise(resolve => {
    pagingMember({}, extraParams)
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          dataList.value = res.dataList;
          mescrollRef.value?.setList(dataList.value, res.totalCount, extraParams);
        } else {
          dataList.value = [...dataList.value, ...res.dataList];
        }
        resolve({ list: dataList.value, total: res.totalCount });
      })
      .catch(() => {
        resolve({ list: [], total: 0 });
      });
  });
};

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.group-history {
  .li {
    margin-top: 12px;
    margin-left: 16px;
    width: 348px;
    height: 98px;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-radius: 8px;
    &-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      .id {
        color: #000;
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
        white-space: nowrap;
        overflow: hidden;
        width: 266px;
      }
      .type {
        display: flex;
        align-items: flex-start;
        color: #545454;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        &-first {
          margin-right: 20px;
        }
      }
      .time {
        color: #545454;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
      }
    }
    &-right {
      width: 50px;
      height: 66px;
      box-sizing: border-box;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .top {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btm {
        width: 50px;
        height: 16px;
        color: #ffffff;
        text-align: center;
        font-size: 10px;
        font-weight: 600;
        line-height: 16px;
      }
    }
    .status0 {
      .top {
        background-color: #f6f8ff;
        .img {
          width: 30px;
          height: 30px;
          background-image: url($url + 'group/emoji-happy.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
      .btm {
        background-color: #5073f7;
      }
    }
    .status1 {
      .top {
        background-color: #e6f9f3;
        .img {
          width: 30px;
          height: 30px;
          background-image: url($url + 'group/cup.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
      .btm {
        background-color: #07c160;
      }
    }
    .status2 {
      .top {
        background-color: #fff5f5;
        .img {
          width: 30px;
          height: 30px;
          background-image: url($url + 'group/emoji-normal.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
      .btm {
        background-color: #fa3939;
      }
    }
    .status3 {
      .top {
        background-color: #f2f2f2;
        .img {
          width: 30px;
          height: 30px;
          background-image: url($url + 'group/emoji-sad.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
      .btm {
        background-color: #b5b5b5;
      }
    }
  }
}
</style>